<template>
  <div class="topClassOutStoreDetail">
    <base-info v-if="this.$props.roleType===3" class="base-info" categoryTitle="" :params="paramsOwner" :data="this.responseData">
    </base-info>
    <base-info v-else class="base-info" categoryTitle="" :params="params" :data="this.responseData">
    </base-info>
    <div v-if="this.responseData.outStoreDetails.length>0" style="width: 958px;">
      <egrid border
             max-height="500"
             :column-key-map="{ label: 'name' }"
             :data="this.responseData.outStoreDetails"
             :columns="columns"
             :columns-schema="columnsSchema"
             :columns-props="columnsProps"
             :columns-handler="columnsHandler"
             :deleteEmptyColumn=true
             @selection-change="selectionChange">
      </egrid>
    </div>

    <div v-if="this.isBottomoutStoreFiles || this.isBottomscanFiles" style="border-bottom: 1px solid #e5e5e5;width: 958px;margin-top: 20px"> </div>
    <file-view :isBottom="this.isBottomoutStoreFiles" :headTitle="'出库单'" :fileType='".jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx,.pdf,.JPG,.JPEG,.PDF,.bmp,.gif"' v-if="this.responseData.outStoreFiles.length!==0" :fileUrlsArray ="this.responseData.outStoreFiles"></file-view>
    <file-view :isBottom="this.isBottomscanFiles" :headTitle="'抄码单'" :fileType='".jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx,.pdf,.JPG,.JPEG,.PDF,.bmp,.gif"' v-if="this.responseData.scanFiles.length!==0" :fileUrlsArray ="this.responseData.scanFiles"></file-view>
    <div v-if="this.$props.statusType===4&&(this.responseData.remark!==''||this.responseData.customerRemark!==''||this.responseData.cancelReason!=='')" class="noteClass">
      <div class="singleNoteClass">
        <span>{{this.responseData.remark}}</span>
      </div>
      <div class="singleNoteClass">
        <span>{{this.responseData.customerRemark}}</span>
      </div>
      <div class="singleNoteClass">
        <span>{{this.responseData.cancelReason}}</span>
      </div>
    </div>
    <div v-else-if="(this.responseData.remark!==''||this.responseData.customerRemark!=='')" class="noteClassConfirm">
      <div class="singleNoteClass">
        <span>{{this.responseData.remark}}</span>
      </div>
      <div class="singleNoteClass">
        <span>{{this.responseData.customerRemark}}</span>
      </div>
    </div>
    <div>
      <el-row v-if="this.$props.statusType===2" class="btnFrameClass">
        <el-button class="singleBtnClass" v-permission="['wms:outstore:sure']" type="primary" @click="sureOutStore">确认出库</el-button>
        <el-button class="singleBtnClass" v-permission="['wms:outstore:sure']" type="primary" plain @click="backOutStore">打回</el-button>
      </el-row>
    </div>
  </div>
</template>
<script>
  import PcDialog from 'components/dialog';
  import BaseInfo from 'components/wms/comm/BaseInfo';
  import Data from 'src/components/Egrid/data';
  import fileView from 'src/components/fileUpload/fileView.vue';
  export default {
    components: {
      PcDialog,
      Data,
      fileView,
      BaseInfo
    },
    props: {
      roleType: {
        type: Number
      },
      isAdditionalInformation: {
        type: Boolean
      },
      statusType: {
        type: Number
      },
      detailId: {
        type: String
      },
      version: {
        type: Number
      }
    },
    data() {
      return {
        params: [
          {
            label: '出库仓库',
            labelIcon: ['icon maliiconfont maliicon-img_details_allocati1'],
            delimiter: ' ',
            key: 'storageName'
          },
          {
            label: '货主企业',
            labelIcon: ['icon maliiconfont maliicon-storehouse'],
            delimiter: ' ',
            key: 'ownerName'
          },
          {
            label: '出库日期',
            labelIcon: ['icon maliiconfont maliicon-img_details_calendar'],
            key: 'outStoreDate',
            delimiter: ' '
          },
          {
            label: '提货人姓名',
            labelIcon: ['icon maliiconfont maliicon-img_details_figure'],
            delimiter: ' ',
            key: 'consignee'
          },
          {
            label: '提货人电话',
            labelIcon: ['icon maliiconfont maliicon-img_details_relation'],
            delimiter: ' ',
            key: 'mobile'
          }
        ],
        paramsOwner: [
          {
            label: '出库仓库',
            labelIcon: ['icon maliiconfont maliicon-img_details_allocati1'],
            delimiter: ' ',
            key: 'storageName'
          },
          {
            label: '出库日期',
            labelIcon: ['icon maliiconfont maliicon-img_details_calendar'],
            key: 'outStoreDate',
            delimiter: ' '
          },
          {
            label: '提货人姓名',
            labelIcon: ['icon maliiconfont maliicon-img_detailse_funds'],
            delimiter: ' ',
            key: 'consignee'
          },
          {
            label: '提货人电话',
            labelIcon: ['icon maliiconfont maliicon-img_details_relation'],
            delimiter: ' ',
            key: 'mobile'
          }
        ],
        isBottomoutStoreFiles: false,
        isBottomscanFiles: false,
        columns: [
          {name: '仓单业务号', prop: 'wrBusinessNo'},
          {name: '货物名称', prop: 'goodsName'},
          {name: '柜号', prop: 'cntrNo'},
          {name: '生产厂家', prop: 'vendor'},
          {name: '原产地', prop: 'countryOrigin'},
          {name: '包装', prop: 'packageName'},
          {name: '生产日期', prop: 'productDate'},
          {name: '单位', prop: 'unitName'},
          {name: '计划出库数量', prop: 'planCount'},
          {name: '实际出库数量', prop: 'actCount'},
          {name: '出库重量(kg)', prop: 'outWeight'},
          {name: '抄码重量(kg)', prop: 'scanWeight'}
        ],
        // columnsProps 用于定义所有 columns 公共的属性，
        // 这里属性可以参考这里： http://element.eleme.io/#/zh-CN/component/table#table-column-attributes
        columnsProps: {
          height: 40,
          minWidth: 150,
          showOverflowTooltip: true,
          align: 'center'
          // 定义表格列如何渲染
//          component: Editor
        },
        // columnsSchema 可以用来单独定义 columns 的某一列，这里的设置会覆盖 columnsProps 的配置属性
        columnsSchema: {
        },
        selecetedRows: [],
        propsSpan: ['date'],
        responseData: {
          operateType: '',
          businessType: '',
          consignee: '',
          cancelReason: '',
          cntrNo: '',
          customerRemark: '',
          mobile: '',
          id: null,
          outStoreDate: '',
          resource: '',
          outStoreDetails: [
            {
              planOutCount: '',
              actOutCount: '',
              outWeight: '',
              scanWeight: '',
              avaStockNum: '', // 可用库存数量
              cntrNo: '', // 柜号
              countryOrigin: '', // 原产地
              goodsId: '', // 货物ID编号
              goodsName: '', // 货物名称
              packageId: '', // 包装
              packageName: '', // 包装
              productDate: '', // 生产日期
              refAvgWeight: '', // 入库平均重量
              unit: '', // 单位
              unitName: '', // 单位
              vendor: '', // 生产厂家
              wrBusinessNo: '', // 仓单业务号
              wsStockNum: '' // 仓单库存数量
            }
          ],
          outStoreFiles: [], // 出库单数组
          ownerId: null,
          storageName: '',
          ownerName: '',
          remark: '',
          scanFiles: [], // 抄码单数组
          storageId: null
        }
      };
    },
    created() {
      this.getDataInfo();
    },
    mounted: function () {
    },
    methods: {
      getDataInfo() {
        this.ajax({
          type: 'GET',
          url: '/maliwms/outStore/outStoreDetail/' + this.$props.detailId,
          loading: true,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            this.responseData = res.result;
            for (let i = 0; i < this.responseData.outStoreDetails.length; i++) {
              if (this.responseData.outStoreDetails[i].wrBusinessNo === null) {
                this.responseData.outStoreDetails[i].wrBusinessNo = '';
              }
              if (this.responseData.outStoreDetails[i].goodsName === null) {
                this.responseData.outStoreDetails[i].goodsName = '';
              }
              if (this.responseData.outStoreDetails[i].cntrNo === null) {
                this.responseData.outStoreDetails[i].cntrNo = '';
              }
              if (this.responseData.outStoreDetails[i].actCount === null) {
                this.responseData.outStoreDetails[i].actCount = '';
              }
              if (this.responseData.outStoreDetails[i].outWeight === null) {
                this.responseData.outStoreDetails[i].outWeight = '';
              }
              if (this.responseData.outStoreDetails[i].productDate === null) {
                this.responseData.outStoreDetails[i].productDate = '';
              }
              if (this.responseData.outStoreDetails[i].planCount === null) {
                this.responseData.outStoreDetails[i].planCount = '';
              }
              if (this.responseData.outStoreDetails[i].unitName === null) {
                this.responseData.outStoreDetails[i].unitName = '';
              }
              if (this.responseData.outStoreDetails[i].packageName === null) {
                this.responseData.outStoreDetails[i].packageName = '';
              }
              if (this.responseData.outStoreDetails[i].vendor === null) {
                this.responseData.outStoreDetails[i].vendor = '';
              }
              if (this.responseData.outStoreDetails[i].countryOrigin === null) {
                this.responseData.outStoreDetails[i].countryOrigin = '';
              }
              if (this.responseData.outStoreDetails[i].scanWeight === null) {
                this.responseData.outStoreDetails[i].scanWeight = '';
              }
            }
            if (this.responseData.cancelReason === null || this.responseData.cancelReason === '') {
              this.responseData.cancelReason = '';
            } else {
              this.responseData.cancelReason = '取消原因: ' + this.responseData.cancelReason;
            }
            if (this.responseData.remark === null || this.responseData.remark === '') {
              this.responseData.remark = '';
            } else {
              this.responseData.remark = '货主备注: ' + this.responseData.remark;
            }
            if (this.responseData.customerRemark === null || this.responseData.customerRemark === '') {
              this.responseData.customerRemark = '';
            } else {
              this.responseData.customerRemark = '客服备注: ' + this.responseData.customerRemark;
            }
            if (this.responseData.scanFiles.length !== 0) {
              this.isBottomscanFiles = true;
            } else {
              this.isBottomscanFiles = false;
              if (this.responseData.outStoreFiles.length !== 0) {
                this.isBottomoutStoreFiles = true;
              } else {
                this.isBottomoutStoreFiles = false;
              }
            }
          }
        });
      },
      columnsHandler (cols) {
      },
      sureOutStore() {
        this.ajax({
          type: 'POST',
          url: '/maliwms/outStore/confirmOutStore',
          data: {id: this.$props.detailId, version: this.$props.version},
          loading: true,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            if (res.code === 200) {
              this.$emit('closeRefresh');
            } else {
              this.errorTip(res.message);
            }
          }
        });
      },
      backOutStore() {
        this.ajax({
          type: 'PUT',
          url: '/maliwms/outStore/backOutStore',
          data: {id: this.$props.detailId, version: this.$props.version},
          loading: true,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            if (res.code === 200) {
              this.$emit('closeRefresh');
            } else {
              this.errorTip(res.message);
            }
          }
        });
      },
      selectionChange (rows) {
        this.selecetedRows = rows;
      },

      clearSelection () {
        const { egrid } = this.$refs;
        if (egrid && egrid.clearSelection) {
          egrid.clearSelection();
        }
      }
    }
  };
</script>
<style scoped>
  .addForm{
    margin-top:10px;
    margin-left: -30px;
    /*width:1000px;*/
  }
  .topClassOutStoreDetail {
    overflow: hidden;
  }
  .topClassOutStoreDetail .base-info {
    height: auto;
    width: 958px;
    border-top: 1px solid #e5e5e5;
    border-left: 1px solid #e5e5e5;
    background-color: #f5f6f7;
    margin-bottom: 20px;
  }
  .el-form-item .el-form-item__error {
    /*padding-top: 36px;*/
    /*margin-left: -60px;*/
  }
  .singleBtnClass
  {
    width: 140px;
    height: 40px;
  }

  .noteClass
  {
    width: 958px;
    margin-bottom: 20px;
    height: auto;
    background: white;
    margin-top: 20px;
    border: 1px solid #e5e5e5;
  }
  .noteClassConfirm
  {
    width: 958px;
    margin-bottom: 20px;
    height: auto;
    background: white;
    margin-top: 20px;
    border: 1px solid #e5e5e5;
  }
  .singleNoteClass
  {
    height: auto;
    color: #333333;
    margin-left: 10px;
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .btnFrameClass
  {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 20px;
    text-align: center;
  }
</style>
